<template>
	<view>
		<view class="page">
			<comp-common v-bind="{data:data}"></comp-common>
			<comp-header v-bind="{data:data}"></comp-header>
			<view class="body after-navber">
				<view class="top">
					<image :src="data.__wxapp_img.step.log_bg.url"></image>
					<view class="total">
						<view class="total-num">{{data.currency}}</view>
						<view>总获得奖励</view>
					</view>
					<view class="data">
						<view class="location">
							<view class="data-num">{{data.total_bout}}</view>
							<view>参赛次数</view>
						</view>
						<view class="location">
							<view class="data-num">{{data.bout}}</view>
							<view>达标次数</view>
						</view>
						<view class="location">
							<view class="data-num">{{data.bout_ratio}}%</view>
							<view>达标率</view>
						</view>
					</view>
				</view>
				<view class="log">参赛记录</view>
				<view class="list" v-for="(item,index) in data.list" :key="index">
					<view class="list-title">
						<view class="title-left">{{item.name}} {{item.step_num}}步挑战赛</view>
						<view class="wait" v-if="item.date<=time&&item.log_status==2">待结算</view>
						<view class="loser" v-if="item.date<=time&&item.log_status==3">未达标</view>
						<view class="loser" v-if="item.date>time">未开始</view>
						<view class="finish" v-if="item.date<=time&&item.log_status==1">已结算</view>
					</view>
					<view class="list-body">
						<view class="list-num">{{item.user_num}}</view>
						<view>完成步数</view>
					</view>
					<view class="list-body">
						<view class="list-num">{{item.user_currency}}</view>
						<view>奖励金额</view>
					</view>
				</view>
				<view class="loading" v-if="data.loading">正在加载中...</view>
			</view>
			<comp-footer v-bind="{data:data}"></comp-footer>
		</view>

	</view>
</template>

<script>var myVue = {};
	var t = require("../../utils/helper.js");

	export default {
		data() {
			return {
				data: {
					currency: 0,
					bout_ratio: 0,
					total_bout: 0,
					bout: 0,
					page: 2,
					list: [{
						name: ""
					}, {
						step_num: 0
					}, {
						user_currency: 0
					}, {
						user_num: 0
					}, {
						status: 0
					}]
				}
			};
		},
		onReachBottom: function() {
			var t = this,
				a = t.data.over;
			if (!a) {
				var e = this.data.list,
					o = this.data.page;
				this.setData({
					loading: !0
				}), t.getApp.request({
					url: t.getApp.api.step.activity_log,
					data: {
						page: o
					},
					success: function(i) {
						for (var r = 0; r < i.data.list.length; r++) e.push(i.data.list[r]);
						i.data.list.length < 10 && (a = !0), t.setData({
							list: e,
							page: o + 1,
							loading: !1,
							over: a
						});
					}
				});
			}
		},
		onLoad: function(a) {myVue = this;
			myVue.getApp.page.onLoad(this, a);
			var e = this,
				o = t.formatTime(new Date()),
				i = o[0] + o[1] + o[2] + o[3] + o[5] + o[6] + o[8] + o[9];
			e.getApp.core.showLoading({
				title: "数据加载中...",
				mask: !0
			}), e.getApp.request({
				url: e.getApp.api.step.activity_log,
				success: function(t) {
					e.getApp.core.hideLoading();
					var a = t.data.info,
						o = 0;
					a.currency > 0 && (o = a.currency);
					for (var r = t.data.list, s = 0; s < r.length; s++) void 0 != r[s].open_date && (r[s].date = r[s].open_date.replace(
						"-", "").replace("-", ""));
					e.setData({
						currency: o,
						bout_ratio: a.bout_ratio,
						total_bout: a.total_bout,
						bout: a.bout,
						time: i,
						list: r
					});
				}
			});
		}
	}
</script>

<style scoped>
	.top { 
		height: 408upx; 
		width: 100%; 
		text-align: center; 
		color: #fff; 
		font-size: 9pt; 
		position: relative; 
	} 
 
	.top image { 
		height: 408upx; 
		width: 100%; 
	} 
 
	.total { 
		position: absolute; 
		top: 80upx; 
		width: 100%; 
	} 
 
	.total-num { 
		font-size: 27pt; 
		font-family: 'DIN'; 
		margin-bottom: 18upx; 
	} 
 
	.data { 
		position: absolute; 
		bottom: 80upx; 
		width: 100%; 
	} 
 
	.location { 
		float: left; 
		width: 33.33%; 
	} 
 
	.data-num { 
		font-size: 16pt; 
		font-family: 'DIN'; 
		margin-bottom: 9upx; 
	} 
 
	.log { 
		height: 64upx; 
		color: #999; 
		font-size: 11pt; 
		padding-left: 24upx; 
		background-color: #f7f7f7; 
		line-height: 64upx; 
	} 
 
	.list { 
		height: 254upx; 
		width: 100%; 
		background-color: white; 
		color: #999; 
		font-size: 11pt; 
		padding: 28upx 24upx; 
		margin-bottom: 20upx; 
	} 
 
	.list-title { 
		height: 48upx; 
		width: 100%; 
	} 
 
	.title-left { 
		float: left; 
		color: #353535; 
		font-size: 11pt; 
	} 
 
	.wait { 
		height: 48upx; 
		width: 94upx; 
		background-color: #feeeee; 
		color: #ff4544; 
		font-size: 9pt; 
		line-height: 48upx; 
		text-align: center; 
		float: right; 
	} 
 
	.finish { 
		height: 48upx; 
		width: 94upx; 
		background-color: #fff2e2; 
		color: #ff9d1e; 
		font-size: 9pt; 
		line-height: 48upx; 
		text-align: center; 
		float: right; 
	} 
 
	.loser { 
		height: 48upx; 
		width: 94upx; 
		background-color: #eee; 
		color: #999; 
		font-size: 9pt; 
		line-height: 48upx; 
		text-align: center; 
		float: right; 
	} 
 
	.list-body { 
		width: 50%; 
		padding: 40upx 0 50upx; 
		float: left; 
		text-align: center; 
	} 
 
	.list-num { 
		font-size: 17pt; 
		color: #ff9d1e; 
		font-family: 'DIN'; 
		margin-bottom: 16upx; 
	} 
 
	.loading { 
		color: #353535; 
		text-align: center; 
		height: 80upx; 
		line-height: 80upx; 
	} 
</style>
